import PropTypes from 'prop-types'
import { Layout, Tree } from 'antd'
import { arrayToTree } from 'utils'

const { TreeNode } = Tree

// 侧边(树)
const TreeWrap = ({ treeData, selectedKeys, onSelect }) => {
	// 将单列数组转成嵌套结构 参数： 数据源 节点标识 父节点标识
	treeData = arrayToTree(treeData, 'deptId', 'parentDeptId')
	// 用递归方法将 嵌套的数据结构组装成嵌套的组件 并返回
	let renderTreeNodes = (data = []) => {
		return data.map((item) => {
			if (item.nodes && item.nodes.length) {
				return (
					<TreeNode title={item.deptName} key={item.deptId} dataRef={item}>
						{renderTreeNodes(item.nodes)}
					</TreeNode>
				)
			}
			return <TreeNode title={item.deptName} key={item.deptId} dataRef={item} />
		})
	}

	return (
		<Layout>
			<Tree
				autoExpandParent={true}
				defaultExpandAll={true}
				onSelect={onSelect}  //点选节点事件
				selectedKeys={selectedKeys}  //已选择的节点标识集合 为数组
			>
				{renderTreeNodes(treeData)  /* 节点内容 */}
			</Tree>
		</Layout>
	)
}

// 通过PropTypes 获取父组件传来的属性（需引入PropTypes）
TreeWrap.propTypes = {
  treeData: PropTypes.array,  //树的数据应该为一个数组
	selectedKeys: PropTypes.array,  //已选节点标识应该为一个数组
	onSelect: PropTypes.func,  //点选事件应该为一个函数
}

export default TreeWrap